.tabs {
    position: relative;
    display: block;
    width: 100%;
}

.tab-list {
    position: relative;
    display: flex;
    flex-direction: row;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
    overflow: auto;
}

.tab-list.-stretch .tab {
    flex-grow: 1;
}

.tab-list.-stretch .tab:last-child {
    border-right-width: 0;
}

.tab-list {
    box-shadow: var(--tab-list--box-shadow, var(--tab-list--box-shadow-offset-x) var(--tab-list--box-shadow-offset-y) var(--tab-list--box-shadow-blur-radius) var(--tab-list--box-shadow-spread-radius) var(--tab-list--box-shadow-color));
    background: var(--tab-list--background);
    border-style: var(--tab-list--border-style, var(--tab-list--border-top-style) var(--tab-list--border-right-style) var(--tab-list--border-bottom-style) var(--tab-list--border-left-style));
    border-color: var(--tab-list--border-color, var(--tab-list--border-top-color) var(--tab-list--border-right-color) var(--tab-list--border-bottom-color) var(--tab-list--border-left-color));
    border-width: var(--tab-list--border-width, var(--tab-list--border-top-width) var(--tab-list--border-right-width) var(--tab-list--border-bottom-width) var(--tab-list--border-left-width));
    border-radius: var(--tab-list--border-radius, var(--tab-list--border-top-left-radius) var(--tab-list--border-top-right-radius) var(--tab-list--border-bottom-right-radius) var(--tab-list--border-bottom-left-radius));
    color: var(--tab-list--color);
    font-size: var(--tab-list--font-size);
    padding: var(--tab-list--padding, var(--tab-list--padding-top) var(--tab-list--padding-right) var(--tab-list--padding-bottom) var(--tab-list--padding-left));
    margin: var(--tab-list--margin, var(--tab-list--margin-top) var(--tab-list--margin-right) var(--tab-list--margin-bottom) var(--tab-list--margin-left));
    transition-property: var(--tab-list--transition-property);
    transition-duration: var(--tab-list--transition-duration);
    transition-timing-function: var(--tab-list--transition-timing-function);
}

.tab-list.-light {
    --tab-list--border-top-color: var(--tab-list--light--border-top-color);
    --tab-list--border-right-color: var(--tab-list--light--border-right-color);
    --tab-list--border-bottom-color: var(--tab-list--light--border-bottom-color);
    --tab-list--border-left-color: var(--tab-list--light--border-left-color);
    --tab-list--background: var(--tab-list--light--background);
    --tab-list--color: var(--tab-list--light--color);
}

.tab-list.-dark {
    --tab-list--border-top-color: var(--tab-list--dark--border-top-color);
    --tab-list--border-right-color: var(--tab-list--dark--border-right-color);
    --tab-list--border-bottom-color: var(--tab-list--dark--border-bottom-color);
    --tab-list--border-left-color: var(--tab-list--dark--border-left-color);
    --tab-list--background: var(--tab-list--dark--background);
    --tab-list--color: var(--tab-list--dark--color);
}

.tab {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}

.tab {
    box-shadow: var(--tab--box-shadow, var(--tab--box-shadow-offset-x) var(--tab--box-shadow-offset-y) var(--tab--box-shadow-blur-radius) var(--tab--box-shadow-spread-radius) var(--tab--box-shadow-color));
    background: var(--tab--background);
    border-style: var(--tab--border-style, var(--tab--border-top-style) var(--tab--border-right-style) var(--tab--border-bottom-style) var(--tab--border-left-style));
    border-color: var(--tab--border-color, var(--tab--border-top-color) var(--tab--border-right-color) var(--tab--border-bottom-color) var(--tab--border-left-color));
    border-width: var(--tab--border-width, var(--tab--border-top-width) var(--tab--border-right-width) var(--tab--border-bottom-width) var(--tab--border-left-width));
    border-radius: var(--tab--border-radius, var(--tab--border-top-left-radius) var(--tab--border-top-right-radius) var(--tab--border-bottom-right-radius) var(--tab--border-bottom-left-radius));
    color: var(--tab--color);
    font-size: var(--tab--font-size);
    padding: var(--tab--padding, var(--tab--padding-top) var(--tab--padding-right) var(--tab--padding-bottom) var(--tab--padding-left));
    transition-property: var(--tab--transition-property);
    transition-duration: var(--tab--transition-duration);
    transition-timing-function: var(--tab--transition-timing-function);
}

.tab:hover, .tab.-hover {
    background: var(--tab--hover--background);
    border-color: var(--tab--hover--border-color, var(--tab--hover--border-top-color) var(--tab--hover--border-right-color) var(--tab--hover--border-bottom-color) var(--tab--hover--border-left-color));
}

.tab:focus, .tab.-focus {
    background: var(--tab--focus--background);
    border-color: var(--tab--focus--border-color, var(--tab--focus--border-top-color) var(--tab--focus--border-right-color) var(--tab--focus--border-bottom-color) var(--tab--focus--border-left-color));
}

.tab:active, .tab.-active {
    font-weight: var(--tab--active--font-weight);
    background: var(--tab--active--background);
    border-color: var(--tab--active--border-color, var(--tab--active--border-top-color) var(--tab--active--border-right-color) var(--tab--active--border-bottom-color) var(--tab--active--border-left-color));
}

.tab.-light {
    --tab--border-top-color: var(--tab--light--border-top-color);
    --tab--border-right-color: var(--tab--light--border-right-color);
    --tab--border-bottom-color: var(--tab--light--border-bottom-color);
    --tab--border-left-color: var(--tab--light--border-left-color);
    --tab--background: var(--tab--light--background);
    --tab--color: var(--tab--light--color);
    --tab--active--background: var(--tab--light--active--background);
    --tab--active--border-top-color: var(--tab--light--active--border-top-color);
    --tab--active--border-right-color: var(--tab--light--active--border-right-color);
    --tab--active--border-bottom-color: var(--tab--light--active--border-bottom-color);
    --tab--active--border-left-color: var(--tab--light--active--border-left-color);
    --tab--hover--background: var(--tab--light--hover--background);
    --tab--hover--border-top-color: var(--tab--light--hover--border-top-color);
    --tab--hover--border-right-color: var(--tab--light--hover--border-right-color);
    --tab--hover--border-bottom-color: var(--tab--light--hover--border-bottom-color);
    --tab--hover--border-left-color: var(--tab--light--hover--border-left-color);
    --tab--focus--background: var(--tab--light--focus--background);
    --tab--focus--border-top-color: var(--tab--light--focus--border-top-color);
    --tab--focus--border-right-color: var(--tab--light--focus--border-right-color);
    --tab--focus--border-bottom-color: var(--tab--light--focus--border-bottom-color);
    --tab--focus--border-left-color: var(--tab--light--focus--border-left-color);
}

.tab.-dark {
    --tab--border-top-color: var(--tab--dark--border-top-color);
    --tab--border-right-color: var(--tab--dark--border-right-color);
    --tab--border-bottom-color: var(--tab--dark--border-bottom-color);
    --tab--border-left-color: var(--tab--dark--border-left-color);
    --tab--background: var(--tab--dark--background);
    --tab--color: var(--tab--dark--color);
    --tab--active--background: var(--tab--dark--active--background);
    --tab--active--border-top-color: var(--tab--dark--active--border-top-color);
    --tab--active--border-right-color: var(--tab--dark--active--border-right-color);
    --tab--active--border-bottom-color: var(--tab--dark--active--border-bottom-color);
    --tab--active--border-left-color: var(--tab--dark--active--border-left-color);
    --tab--hover--background: var(--tab--dark--hover--background);
    --tab--hover--border-top-color: var(--tab--dark--hover--border-top-color);
    --tab--hover--border-right-color: var(--tab--dark--hover--border-right-color);
    --tab--hover--border-bottom-color: var(--tab--dark--hover--border-bottom-color);
    --tab--hover--border-left-color: var(--tab--dark--hover--border-left-color);
    --tab--focus--background: var(--tab--dark--focus--background);
    --tab--focus--border-top-color: var(--tab--dark--focus--border-top-color);
    --tab--focus--border-right-color: var(--tab--dark--focus--border-right-color);
    --tab--focus--border-bottom-color: var(--tab--dark--focus--border-bottom-color);
    --tab--focus--border-left-color: var(--tab--dark--focus--border-left-color);
}

.tab-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
}

.tab-panel {
    box-shadow: var(--tab-panel--box-shadow, var(--tab-panel--box-shadow-offset-x) var(--tab-panel--box-shadow-offset-y) var(--tab-panel--box-shadow-blur-radius) var(--tab-panel--box-shadow-spread-radius) var(--tab-panel--box-shadow-color));
    background: var(--tab-panel--background);
    border-style: var(--tab-panel--border-style, var(--tab-panel--border-top-style) var(--tab-panel--border-right-style) var(--tab-panel--border-bottom-style) var(--tab-panel--border-left-style));
    border-color: var(--tab-panel--border-color, var(--tab-panel--border-top-color) var(--tab-panel--border-right-color) var(--tab-panel--border-bottom-color) var(--tab-panel--border-left-color));
    border-width: var(--tab-panel--border-width, var(--tab-panel--border-top-width) var(--tab-panel--border-right-width) var(--tab-panel--border-bottom-width) var(--tab-panel--border-left-width));
    border-radius: var(--tab-panel--border-radius, var(--tab-panel--border-top-left-radius) var(--tab-panel--border-top-right-radius) var(--tab-panel--border-bottom-right-radius) var(--tab-panel--border-bottom-left-radius));
    color: var(--tab-panel--color);
    font-size: var(--tab-panel--font-size);
    padding: var(--tab-panel--padding, var(--tab-panel--padding-top) var(--tab-panel--padding-right) var(--tab-panel--padding-bottom) var(--tab-panel--padding-left));
    transition-property: var(--tab-panel--transition-property);
    transition-duration: var(--tab-panel--transition-duration);
    transition-timing-function: var(--tab-panel--transition-timing-function);
}

.tab-panel.-light {
    --tab-panel--border-top-color: var(--tab-panel--light--border-top-color);
    --tab-panel--border-right-color: var(--tab-panel--light--border-right-color);
    --tab-panel--border-bottom-color: var(--tab-panel--light--border-bottom-color);
    --tab-panel--border-left-color: var(--tab-panel--light--border-left-color);
    --tab-panel--background: var(--tab-panel--light--background);
    --tab-panel--color: var(--tab-panel--light--color);
}

.tab-panel.-dark {
    --tab-panel--border-top-color: var(--tab-panel--dark--border-top-color);
    --tab-panel--border-right-color: var(--tab-panel--dark--border-right-color);
    --tab-panel--border-bottom-color: var(--tab-panel--dark--border-bottom-color);
    --tab-panel--border-left-color: var(--tab-panel--dark--border-left-color);
    --tab-panel--background: var(--tab-panel--dark--background);
    --tab-panel--color: var(--tab-panel--dark--color);
}
